<template>
    <div>
        <div>
            <van-nav-bar title="视频问诊" left-text="" left-arrow @click="onClickLeft" />
        </div>
        <div style="width: 100%;height: 150px;background-color: red;">
            <!-- 顶部通知栏 -->
            <van-notice-bar>重要：急重症不适合网上咨询，请立即前往当地医院就诊</van-notice-bar>
            <div class="files">
                <h3>选择档案</h3> <span class="filesadd" @click="Toflilesadd">+新建档案</span>
                <van-popup  v-model:show="showBottom" position="bottom"   :style="{ height: '30%' }">
                     <h3 style="position: absolute;top: 15px;left: 15px;">新建档案</h3> <span><img src="../../assets/img/guanbi.png" alt="" style="position: absolute;right: 15px;top: 15px;width: 20px;height: 20px;"></span>
                </van-popup>
               
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter()
const showBottom = ref(false);
const onClickLeft = () => {
    router.go(-1)
}
const Toflilesadd = () => {
showBottom.value = true

}
</script>

<style lang="scss" scoped>
.van-notice-bar {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--van-notice-bar-height);
    padding: var(--van-notice-bar-padding);
    color: #fec049;
    font-size: var(--van-notice-bar-font-size);
    line-height: var(--van-notice-bar-line-height);
    background: var(--van-notice-bar-background);
}

.files {
    position: relative;

    h3 {
        position: absolute;
        left: 15px;
    }

    .filesadd {
        position: absolute;
        right: 15px;
        color: #70de92;
    }
}
</style>